<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#p1{
			height: 138px;
			background: url(img/cald.png) no-repeat;
		}
		#span1{
			color: #FFFFFF;
			line-height: 30px;
			padding-left: 40px;
			font-size: 20px;
		}
		#span2{
			color: #000000;
			padding-left: 40px;
			font-size: 90px;
			line-height: 100px;
		}
		#p2{
			padding-top: 32px;
			padding-left: 24px;
			height: 146px;
			background: url(img/clock.png) no-repeat;
			color: #FFFFFF;
			font-size: 52px;
		}
	</style>
	<body>
		<div>
			<p id="p1">
				<span id="span1"></span>
				<br>
				<span id="span2"></span>
			</p>
		<br />
			<p id="p2"></p>
		</div>
	</body>
	<script>
		
		var p1 = document.querySelector("#p1");
		var p2 = document.querySelector("#p2");
		var p1 = document.querySelector("#span1");
		var p1 = document.querySelector("#span2");
		show1();
		setInterval(show1,21600000);
		setInterval(show2,1000);
		
		function show1(){
			var time1 = new Date();
			
			var week= time1.getDay();
			var w = "日一二三四五六".charAt(week);
			var d = time1.getDate();
			
			var str1 = " 星期"+`${w}`;	
			var str2 = `${d}`;
			span1.innerHTML = str1;
			span2.innerHTML = str2;
			
		}
		
		function show2(){
			var time2 = new Date();
			var h = time2.getHours();
			h = h > 9 ? h : "0" + h;
			var m = time2.getMinutes();
			m = m > 9 ? m : "0" + m; 
			var s = time2.getSeconds();
			s = s > 9 ? s : "0" + s; 
			var str = `${h}:${m}:${s}`;
			p2.innerHTML = str;
		}
	</script>
<ml>
